<template>
	<div class="product_info" v-if="Object.keys(product).length>0">
		<!-- 头部 -->
		<div class="nav_top d-flex jc-between ai-center">
			<div> 
				<el-button type="text" @click="$router.go(-1)">
					<div class="iconfont icon-back ml-3 fs-xxxl text-dark"></div>
				</el-button>
			</div>
			<div class="fs-xxl text-dark">
				商品
			</div>
			<div>
				<el-button type="text" @click="$router.push('/')">
					<div class="iconfont icon-shouye mr-3 fs-xxxl text-dark"></div>
				</el-button>
			</div>
			
		</div>

		<!-- 商品详情 -->
		<div class="product_detail">
			<!-- swiper和文字描述 -->
			<div class="product_img">
				<div class="">
					<swiper :options="swiperOption">
						<swiper-slide v-for="item in product.imageItems">
							<van-image
							style="width: 100%; height: 250px;"
							:src="item"
							>
						</van-image>
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
			</div>
			<div>
				<div class="d-flex jc-between px-2 py-1">
					<div class="d-flex text-pink">￥<div class="fs-xxl">{{product.price/100}}</div></div>
					<div class="text-grey">月售{{product.saleNum}}</div>
				</div>
				<div class="d-flex ai-center py-2 px-2"><div class="promise text-white bg-primary py-1 px-1">质量保证</div><div class="fs-xl pl-2">{{product.name}}</div>
			</div>
			<!-- 描述 -->
			<div class="text-grey px-2 py-1">{{product.introduction}}<a class="text-pink px-2">说明书</a></div>
		</div>
	</div>
</div>
<!-- 规格参数 -->
<div class="product_sku py-3 px-2 d-flex">
	<div class="text-grey">规格</div> <div class="px-2">{{product.spec}}新老包装随机发货</div>
</div>
<!-- 商品图文结束与评论 -->
<div class="width-100 d-flex jc-around pb-3">
	<el-tabs class="details" style="height: 100%" v-model="activeName" lazy="false" stretch>
		<el-tab-pane label="详情" name="1">
			<van-image class="img" v-if=""
			style="width: 100%; height: 100%"
			:src="product.details"
			>
		</van-image>
		</el-tab-pane>
		<el-tab-pane class="comment" label="评论" name="2">
			<div class="d-flex jc-between px-2">
				<div style="font-weight: bold;">用户评价({{product.commentNum}})</div><div class="text-grey">好评度<span class="text-pink">100%</span></div>
			</div>
			<!-- 评论列表 -->
			<div class="d-flex px-2 py-2"  v-for="o in 10">
				<div>
					<el-image
					style="width: 40px; height: 40px; border-radius: 50%;"
					:src="url"
					fit="cover">
				</el-image>
				</div>
				<div class="width-100 flex-1 px-2">
					<div class="d-flex jc-between width-100">
						<div>130******706</div><div>2020-01-23</div>
					</div>
					<div>
						<el-rate
						v-model="value"
						disabled
						text-color="#ff9900"
						>
					</el-rate>
					</div>
					<div class="py-2">很好效果----厉害  不错  蜂巢 ！！！</div>
				</div>
			</div>
		</el-tab-pane>
	</el-tabs>
</div>

<!-- 底部 -->
<div class="bottom d-flex ai-center jc-between bg-white py-1">
	<!-- 左侧 -->
	<div class="left d-flex jc-around flex-1">
		<router-link to="/botUi" class="server text-grey-1">
			<div class="iconfont icon-kefu fs-xxxl">
			</div>
			<div class="fs-xs pt-1">客服</div>
		</router-link>
		<div class="server text-grey-1" @click="share">
			<div class="iconfont icon-share3 fs-xxxl">
			</div>
			<div class="fs-xs pt-1">分享</div>
		</div>
		<div class="server text-grey-1"  @click="$router.push('/shopCar')">
			<div class="iconfont icon-juxing fs-xxxl">
			</div>
			<div class="fs-xs pt-1" id="badge">
				<div class="badge"><span id="badge">{{$store.getters.getAllCount}}</span></div>
				清单
			</div>
		</div>
	</div>
	<!-- 右侧按钮 -->
	<div class="right">
		<el-button type="danger" @click="addShopCar(id)">加入清单</el-button>
	</div>
</div>

<!-- 小球 -->
<transition 
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div class="ball" v-show="ballFlag" ref="ball"></div>
</transition>
</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	export default {
		props: ['id'],
		data(){
			return {
				value: 5,
				activeName: '1',
				url: '',
				swiperOption: {
					pagination: {
						el: '.swiper-pagination',
						type: 'fraction'
					},
				},
				ballFlag: false,
				product: {},
				count: 0,

			}
		},
		methods: {
			share(){
				Toast('未开发')
			},
			async getProduct(){
				this.$store.commit('showLoading')
				const res = await this.$http.get(`item/sku.do?id=${this.id}`)
				if (res.data.code != 0) {
					this.product = res.data
					this.$store.commit('hideLoading')

				}else {
					this.$store.commit('hideLoading')
				}
				

			},
			async getCount(){
				const res = await this.$http.get('cart/findCartList.do')
                if (res.status == 200) {
                	res.data.forEach((item,i) => {
                		
                			this.count = this.count+item.orderItem.num;
                		    this.$store.commit('setCount',this.count)
                	})
                }else {
                	this.$store.commit('setCount',0)
                }
			},
			async addShopCar(id){
				this.ballFlag = !this.ballFlag
            	//{id:  ,count:   ,price:   ,selected:   }  拼接出一个要保存的store 到 car数组的数据
            	// var shoppegoodsdinfo = { id: this.id,count: 1, price: this.product.price,selected: true,img: this.product.image, title: this.product.name,spec: this.product.spec};
            	// // 点击添加 购物车  就调用mutation 里面的 addToCar(){} 方法  把我们当前的商品信息作为一个参数传过去
            	
            	const res = await this.$http.get(`cart/buy.do?skuId=${id}`)
            	if (res.data.code != 0) {
            		this.$store.commit('addToCar')
            		Toast('加入成功')
            	}else {
            		Toast('服务器异常')
            	}
            	console.log(this.product.id)
            },
            beforeEnter(el){  //动画入场之前

            	el.style.transform = "translate(0,0)"
            },
			enter(el,done){ //动画开始之后
				

             //获取小球的在页面中位置  ref 方法
             const ballposition = this.$refs.ball.getBoundingClientRect();
             // 用最原始的 方法  获取徽标的位置
             const badgeposition = document.getElementById('badge').getBoundingClientRect();

             const xDist = badgeposition.left - ballposition.left;
             const yDist = badgeposition.top - ballposition.top;
             // el.offsetwidth没有作用  但是不写没有动画效果 why?
             el.offsetWidth
             el.style.transform = `translate(${xDist}px,${yDist}px)`
             el.style.transition = 'all 1s cubic-bezier(.4,-0.3,1,.68)'
              //小球立即消失
              //done  是afterEnter 函数的引用 使小球消失
              done()
          },
          afterEnter(el){
              //小球隐藏
              this.ballFlag= !this.ballFlag
              // vue 把一个完整的动画 使用钩子函数分成了俩部分
          },


      },
      created(){
      	this.getProduct();
      },
  }
</script>

<style lang="scss" scoped>
.product_info {
  height: 100vh;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
.nav_top {
	position: sticky;
	top: 0;
	z-index: 99;
}
.el-menu--horizontal>.el-menu-item {
	height: 50px;
	line-height: 50px;
}
.promise {
	font-size: 12px;
	border-radius: 10%;
}
.product_detail {

	border-bottom: 1px solid #eeee;
}
.product_sku {
	border-bottom: 1px solid #eeee;

}
.el-tabs {
	width: 100%;
}
.bottom {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	
}
//小球
.ball {
    	width: 16px;
    	height: 16px;
    	border-radius: 50%;
    	background-color: pink;
    	position: absolute;
    	z-index: 99;
    	top: 390px;
    	left: 146px;
    	
    }
.badge {
	position: absolute;
	bottom: 30px;
	right: 33%;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid red;
	background-color: #fff;
	color: red;
	text-align: center;
}
.details {
	
	
	height: 100% !important;
	el-tab-pane {
		height: 100% !important;
	}
	.comment {
		height: 100%;
	}
}

</style>